<template >
    <div class="LoginTest">
    <!-- value 写入的内容 是写死的不会变 -->
    <input type="text"  value ='哈哈'></input>  <br>
    <!-- v-bind: 简写 :  是单向绑定， 数据变了会刷页面，但是如果输入框输入数据页面不会刷新 -->
    <!-- <div type="text" v-bind='哈哈'></div> -->
    姓<input type="text" v-model="firstName"></input> <br>
    名<input type="text" v-model="lastName"></input><br>
    全名<span>{{firstName}}{{lastName }}</span><br>
    首字母大写的签名名<span>{{fullName}}</span><br>
    首字母大写的签名名<span>{{fullName}}</span><br>
    首字母大写的签名名<span>{{fullName2()}}</span><br>
    首字母大写的签名名<span>{{fullName2()}}</span><br>
    <button @click="changeFullName">点击修改全面为lisi</button>
    </div>

</template>


<script   lang="ts">

import { computed, ref } from 'vue';   //如果要使用ref定义响应的基本数据 就要引入
import { reactive,toRefs,toRef} from 'vue';  //如果要使用reactive定义响应的基本数据  就要引入
    export default{
        name:'LoginTest',
        setup(){   
        let firstName = ref('张')
        let lastName = ref('三')
        function fullName2 (){
            console.log(2); //会发现函数上面调用了两次fullName2(),他就会打印两次log，因为函数是没有缓存的，调用几次就执行几次
            return firstName.value.slice(0,1) + firstName.value.slice(1) +' ' +  lastName.value
        }

        //这样定义出来的计算属性 fullName是不可更改的，只读！ 就是不能 fullName.value = xxx  但是计算方法里的操作retun的内容随便改，如下 firstName的变化也会影响fullName
        let fullName = computed(()=>{    //计算属性 是有缓存的，如果计算了一次得到的结果在很多个地方被复用，他不会再重新计算
            console.log(1) //会发现计算属性 上面调用了两次fullName 但是只打印了一次log，是因为他算过一次就有缓存，重复使用就用缓存的结果, 而方法是没有缓存的
            return firstName.value.slice(0,1) + firstName.value.slice(1) +' ' +  lastName.value
        })
        let fullName1 = computed({  //计算属性定义出来的fullName1  实际上也是被ref代理的数据  ref(fullName1)
             get() {
                return firstName.value.slice(0,1) + firstName.value.slice(1) +' ' +  lastName.value
            },
            set(val){
                console.log('set',val)
                let [str1,str2] = val.split('-') //下面函数里的fullName1.value = 'li-si' 实际是 将li-si传入  set(li-si), 然后 在set方法里进行分割和赋值操作
                firstName.value = str1
                lastName.value =str2
                
            }
        })  

        function changeFullName(){
            // fullName.value = 'li-si'  //.value飘红，因为computed里没有定义get和set是不能改的
            fullName1.value = '李-四'  //定义了get和set就可以改了,  这里的.value其实是调用了 里面的set方法
        }
        return {firstName,lastName,fullName,fullName2,fullName1,changeFullName}
        }}
</script>